<template>
  <el-skeleton :rows="5" animated v-if="loading" />
  <el-empty v-else-if="!content" description="No content available" />
  <div class="text-display" v-else>
    <!-- 添加"学完"按钮 -->
    <div class="complete-all-section">
      <div>
        <el-button
          type="primary"
          @click="markAllSentencesAsMastered"
          :loading="markingAllAsMastered"
          class="control-button primary"
          v-show="loggedIn"
        >
          √√
        </el-button>
        <span class="complete-all-text" v-show="loggedIn">标记所有句子为已掌握</span>
      </div>
      <div style="display: flex; gap: 8px">
        <span
          class="legend showChinese"
          @click="toggleShowChinese"
          :style="!showChieses ? 'border:2px solid lightgray !important' : ''"
        >
          <el-icon v-if="showChieses">
            <View />
          </el-icon>
          <el-icon v-else> <Hide /> </el-icon>中文
        </span>
        <span
          class="legend ielts-word"
          @click="toggleIELTSWords"
          :style="showIELTSWords ? 'border:2px solid black !important' : ''"
        >
          <el-icon v-if="showIELTSWords">
            <View />
          </el-icon>
          <el-icon v-else> <Hide /> </el-icon>IELTS词汇
        </span>
        <span
          class="legend difficult-word"
          @click="toggleDifficultWords"
          v-show="loggedIn"
          :style="showDifficultWords ? 'border:2px solid black !important' : ''"
        >
          <el-icon v-if="showDifficultWords">
            <View />
          </el-icon>
          <el-icon v-else> <Hide /> </el-icon>生词
        </span>
      </div>
    </div>

    <div
      class="sentence-pair"
      v-for="(sentence, index) in content"
      :key="index"
      :class="{ active: index === currentIndex }"
    >
      <div class="sentence-item english">
        <span class="line-number">{{ index + 1 }}.</span>
        <span
          class="text"
          @click="$emit('play-sentence', index)"
          :style="
            index === currentIndex
              ? 'background-image:url(' + currentWave + ');background-repeat:no-repeat;background-position-y:center;'
              : ''
          "
        >
          <span
            v-for="(word, wordIndex) in splitSentence(sentence.english)"
            :key="wordIndex"
            class="word"
            @click.stop="showWordDetail(word)"
            :class="{
              'ielts-word': isIeltsWord(word),
              'difficult-word': isDifficultWord(word)
            }"
          >
            {{ word }}
          </span>
          <span class="notes" v-if="sentence.notes" type="success" effect="light"> *{{ sentence.notes }} </span>
        </span>
      </div>
      <div class="sentence-item chinese" v-if="showChieses">
        <span class="text">{{ sentence.chinese }}</span>
      </div>
      <!-- 添加标记已掌握按钮 -->
      <div class="sentence-actions" v-if="loggedIn">
        <el-button @click="$emit('play-sentence', index)" size="small" class="control-button" plain> ▶ </el-button>
        <el-button
          @click="toggleSentenceMastered(index)"
          size="small"
          :type="isSentenceMastered(index) ? 'success' : 'warning'"
          plain
          :class="isSentenceMastered(index) ? 'control-button-get' : 'control-button'"
        >
          {{ isSentenceMastered(index) ? '√' : '×' }}
        </el-button>
      </div>
      <!-- 添加跳转到各模块的按钮 -->
      <div class="module-navigation" v-if="$route.params.coursePath && $route.params.id">
        <el-dropdown trigger="click" size="small" :teleported="false">
          <el-button size="small" class="control-button"> ▼ </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <router-link
                  :to="`/text-recall/${$route.params.coursePath}/${$route.params.id}?sentence_id=${index + 1}`"
                >
                  课文回想
                </router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link
                  :to="`/sentence-study/${$route.params.coursePath}/${$route.params.id}?sentence_id=${index + 1}`"
                >
                  句子学习
                </router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link
                  :to="`/word-arrangement/${$route.params.coursePath}/${$route.params.id}?sentence_id=${index + 1}`"
                >
                  排列练习
                </router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link
                  :to="`/listen-identify/${$route.params.coursePath}/${$route.params.id}?sentence_id=${index + 1}`"
                >
                  听辨句子
                </router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link
                  :to="`/dictation-practice/${$route.params.coursePath}/${$route.params.id}?sentence_id=${index + 1}`"
                >
                  听写练习
                </router-link>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <!-- 单词详情对话框 -->
    <WordDetailDialog
      :showMarkWordButton="true"
      :visible="showWordDetailDialog"
      :word="selectedWord"
      :show-mark-word-button="true"
      :is-marked="isWordMarked(selectedWord?.vocabulary)"
      @update:visible="showWordDetailDialog = $event"
      @close="closeWordDetail"
      @toggle-word-mark="handleToggleWordMark"
    />
  </div>
</template>

<script>
import { ElSkeleton, ElEmpty, ElButton, ElPopover, ElAlert, ElIcon } from 'element-plus'
import WordDetailDialog from '@/components/vocabulary/WordDetailDialog.vue'
import { View, Hide } from '@element-plus/icons-vue'
import { textDisplayMixin } from '@/mixins/textDisplay'

export default {
  name: 'TextDisplay',
  components: {
    ElSkeleton,
    ElEmpty,
    ElButton,
    ElPopover,
    ElAlert,
    WordDetailDialog,
    ElIcon,
    View,
    Hide
  },
  mixins: [textDisplayMixin],
  props: {
    content: {
      type: Array,
      required: true
    },
    currentIndex: {
      type: Number,
      default: -1
    },
    currentWave: {
      type: String,
      default: null
    },
    markedWords: {
      type: Array,
      default: () => []
    },
    masteredSentences: {
      type: Array,
      default: () => []
    },
    courseId: {
      type: [String, Number],
      required: false
    },
    lessonId: {
      type: [String, Number],
      required: false
    }
  },
  emits: ['play-sentence', 'toggle-word-mark', 'toggle-sentence-mastered']
}
</script>

<style scoped lang="scss">
@use '../../assets/styles/textDisplay.scss';

@media (min-width: 768px) {
  .text-display .active .english .text {
    animation: waveform-animation var(--waveform-duration) forwards linear;
  }
}
</style>